<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>Home Version 5</title>
<link rel="icon" type="image/png" href="images/favicon.ico" />
<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
<link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">
<!--[if lt IE 9]>
<script src="scripts/ie9.js">IE7_PNG_SUFFIX=".png";</script>
<![endif]-->
<link href='http://fonts.googleapis.com/css?family=PT+Sans:400,400italic,700,700italic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="stylesheets/style.css"> 
<link rel="stylesheet" href="stylesheets/responsive.css"> 
<link rel="stylesheet" href="stylesheets/unleash.css">
<script src="scripts/jquery.min.js"></script> 
<script src="scripts/jquery-css-transform.js"></script>
<script src="scripts/jquery-animate-css-rotate-scale.js"></script>
<script src="scripts/jquery.unleash.min.js"></script>
<script src="scripts/jquery.faq.js"></script>  
<script src="scripts/jquery.blackandwhite.min.js"></script>
<script src="scripts/js_func.js"></script>
<script>
$(function(){
	$('#unleash_slider').unleash({
			    duration: 700,
				childClassName: '.box',
				captionClassName: '.caption',
                SliderWidth: '934px',
                SliderHeight: '350px',
                width: 683,
                Event: "hover",
                CollapseOnMouseLeave: true,
                CaptionAnimation: "opacity"
	});
	$('#faq').dltoggle();
	$("#open").click(function(event){
      $('#faq').dltoggle_show();
      return false;
	});
	$("#close").click(function(event){
      $('#faq').dltoggle_hide();
      return false;
	});
    $('.bwWrapper').BlackAndWhite({
        hoverEffect : true,
        webworkerPath : false,
        responsive:true,
        invertHoverEffect:false
    });
});
</script>
</head>
<body>
<div class="wraper">
 <header class="header">
  <a class="logo" href="index.html">construct</a>
  <nav>
  <!-- top menu -->
   <ul>
    <li><a href="index.html">Home</a>
     <ul>
      <li><a href="index2.html">Home Version 2</a></li>
      <li><a href="index3.html">Home Version 3</a></li>
      <li><a href="index4.html">Home Version 4</a></li>
      <li><a href="index5.html">Home Version 5</a></li>
      <li><a href="index6.html">Home Version 6</a></li>
      <li><a href="index7.html">Home Version 7</a></li>
      <li><a href="index8.html">Home Version 8</a></li>
     </ul>
    </li>
    
    <li><a href="about.html">Pages</a>
     <ul>
      <li><a href="about.html">About Us</a></li>
      <li><a href="team.html">Team</a></li>
      <li><a href="services.html">Services</a></li>
      <li><a href="process.html">Process</a></li>
      <li><a href="testimonials.html">Testimonials</a></li>
      <li><a href="contact_us.html">Contact Us</a></li>
      <li><a href="pricing.html">Pricing</a></li>
      <li><a href="faq.html">FAQ</a></li>
      <li><a href="left_nav.html">Left Nav</a></li>
      <li><a href="left_sidebar.html">Left Sidebar</a></li>
      <li><a href="right_nav.html">Right Nav</a></li>
      <li><a href="right_sidebar.html">Right Sidebar</a></li>
      <li><a href="full_width.html">Full Width</a></li>
     </ul>
    </li>
    <li><a href="short_text.html">Portfolio</a>
     <ul>
      <li><a href="short_text.html">Short Text Layout</a>
       <ul>
        <li><a href="short_text.html">1 Column</a></li>
        <li><a href="short_text2.html">2 Column</a></li>
        <li><a href="short_text3.html">3 Column</a></li>
        <li><a href="short_text4.html">4 Column</a></li>
       </ul>
      </li>
      <li><a href="long_text.html">Long Text Layout</a>
       <ul>
        <li><a href="long_text_wide.html">1 Column Wide</a></li>
        <li><a href="long_text.html">1 Column</a></li>
        <li><a href="long_text2.html">2 Column</a></li>
        <li><a href="long_text3.html">3 Column</a></li>
        <li><a href="long_text4.html">4 Column</a></li>
       </ul>
      </li>
      <li><a href="filtered.html">Filtered Layout</a>
       <ul>
        <li><a href="filtered.html">1 Column</a></li>
        <li><a href="filtered2.html">2 Column</a></li>
        <li><a href="filtered3.html">3 Column</a></li>
        <li><a href="filtered4.html">4 Column</a></li>
       </ul>
      </li>
      <li><a href="right_sidebar.html">Right Sidebar</a>
       <ul>
        <li><a href="right_sidebar.html">1 Column</a></li>
        <li><a href="right_sidebar2.html">2 Column</a></li>
        <li><a href="right_sidebar3.html">3 Column</a></li>
       </ul>
      </li>
      <li><a href="left_sidebar.html">Left Sidebar</a>
       <ul>
        <li><a href="left_sidebar.html">1 Column</a></li>
        <li><a href="left_sidebar2.html">2 Column</a></li>
        <li><a href="left_sidebar3.html">3 Column</a></li>
       </ul>
      </li>
      <li><a href="gallery.html">Gallery Style</a>
       <ul>
        <li><a href="gallery.html">1 Column</a></li>
        <li><a href="gallery2.html">2 Column</a></li>
        <li><a href="gallery3.html">3 Column</a></li>
        <li><a href="gallery4.html">4 Column</a></li>
       </ul>
      </li>
      <li><a href="single_full.html">Portfolio Single Post</a>
       <ul>
        <li><a href="single_full.html">Full Width</a></li>
        <li><a href="single_right.html">Right Sidebar</a></li>
        <li><a href="single_left.html">Left Sidebar</a></li>
       </ul>
      </li>
     </ul>    
    </li>
    <li><a href="blog_post.html">Blog</a>
     <ul>
      <li><a href="blog_full_width.html">Full Width</a></li>
      <li><a href="blog_large.html">Large Image No Sidebar</a></li>
      <li><a href="blog_large_sidebar.html">Large Image With Sidebar</a></li>
      <li><a href="blog_medium_sidebar.html">Medium Image Right Sidebar</a></li>
     </ul>
    </li>
    <li><a href="shortcodes_typography.html">Shortcodes</a>
     <ul>
      <li><a href="shortcodes_typography.html">Typography</a></li>
      <li><a href="shortcodes_buttons_icons.html">Buttons</a></li>
      <li><a href="shortcodes_google_maps.html">Maps</a></li>
      <li><a href="shortcodes_content_sliders.html">Sliders</a></li>
      <li><a href="shortcodes_videos.html">Videos</a></li>
      <li><a href="shortcodes_pricing_tables.html">Tables</a></li>
      <li><a href="shortcodes_alerts_boxes.html">Boxes</a></li>
      <li><a href="shortcodes_accordions_tabs_toggles.html">Tabs</a></li>
     </ul>
    </li>
   </ul>
  <!-- /top menu -->
  </nav>
 </header>
</div> 

<!-- unleash slider -->
<div class="unleash_wrap">
<div class="fallback"><img src="images/sliders/home_page_5/home_page_5_fallback.jpg" alt="" /></div>
<div class="unleash_bg">
 <div id="unleash_slider">
  <div class="box"><img src="images/unleash/img1.png" /><div class="caption"><a href="#"><h1>A responsive, business HTML template!</h1></a><p>Lid est laborum dolo rumes fugats untras. Et harums ser quidem rerum facilis dolores oluptas sad[ps ipsums.</p></div></div>
  <div class="box"><img src="images/unleash/img2.png" /><div class="caption"><a href="#"><h1>A responsive, business HTML template!</h1></a><p>Lid est laborum dolo rumes fugats untras. Et harums ser quidem rerum facilis dolores oluptas sad[ps ipsums.</p></div></div>
  <div class="box"><img src="images/unleash/img3.png" /><div class="caption"><a href="#"><h1>A responsive, business HTML template!</h1></a><p>Lid est laborum dolo rumes fugats untras. Et harums ser quidem rerum facilis dolores oluptas sad[ps ipsums.</p></div></div>
  <div class="box"><img src="images/unleash/img4.png" /><div class="caption"><a href="#"><h1>A responsive, business HTML template!</h1></a><p>Lid est laborum dolo rumes fugats untras. Et harums ser quidem rerum facilis dolores oluptas sad[ps ipsums.</p></div></div>
  <div class="box"><img src="images/unleash/img5.png" /><div class="caption"><a href="#"><h1>A responsive, business HTML template!</h1></a><p>Lid est laborum dolo rumes fugats untras. Et harums ser quidem rerum facilis dolores oluptas sad[ps ipsums.</p></div></div>
 </div>
</div>
</div>
<!-- /unleash slider -->
 
<div class="content_block">
 <!-- text bar2 -->
 <div class="text_bar2">
  <div class="wraper">
   <h2>Welcome to Construct, a responsive business HTML template with tons of options! <span>Want to take a tour?  Check out the numerous options &amp; features that Construct includes, we know you'll love them!</span></h2>
   <a class="buy btn_l" href="#">Buy Construct!</a>
  </div>
 </div>
 <!-- /text bar2 -->
 <div class="wraper">
  <!-- features4_block -->
  <div class="features4_block">
   <ul>
    <li>
     <div class="bwWrapper"><img src="images/home_page_5_features/feature_1.png" width="280" height="140" alt="" /></div>
     <h4>Superb Design Options</h4>
     <p>Fugiat dapibus, tellus ac cursus commodo, mauesris condime ntum nibh, ut fermentum mas justo sitters amet risus. Cras mattis cosi sectetut amet fermens etrsaters  tum aecenas faucib sadips amets.</p>
     <p><a class="btn_col" href="#">Learn More</a></p>
    </li>
    <li>
     <div class="bwWrapper"><img src="images/home_page_5_features/feature_2.png" width="280" height="140" alt="" /></div>
     <h4>Amazing Flexibility</h4>
     <p>Fugiat dapibus, tellus ac cursus commodo, mauesris condime ntum nibh, ut fermentum mas justo sitters amet risus. Cras mattis cosi sectetut amet fermens etrsaters  tum aecenas faucib sadips amets.</p>
     <p><a class="btn_col" href="#">Learn More</a></p>
    </li>
    <li>
     <div class="bwWrapper"><img src="images/home_page_5_features/feature_3.png" width="280" height="140" alt="" /></div>
     <h4>Life Saving Support</h4>
     <p>Fugiat dapibus, tellus ac cursus commodo, mauesris condime ntum nibh, ut fermentum mas justo sitters amet risus. Cras mattis cosi sectetut amet fermens etrsaters  tum aecenas faucib sadips amets.</p>
     <p><a class="btn_col" href="#">Learn More</a></p>
    </li>
   </ul>
  </div>
  <!-- /features4_block -->
  <!-- flyout_area -->
  <div class="flyout_area">
  <dl id="faq">
   <dt><h4>Flyout Content Area 1</h4></dt>
   <dd>
    <div>
     <div class="bwWrapper"><a href="#"><img src="images/home_page_5_features/flyout_content_area_image.png" width="94" height="65" alt="" /></a></div>
     <p>Fugiat dapibus, tellus cursus commodo, tortoeir in mauristes conds ime ntum nibh, ut fermentum massats justo sitis amet risus. Crast matisers consectetut ameter fermes ntum unsers maecenas sadips ipsumores un  ...</p>
    </div> 
   </dd>
   <dt><h4>Another Flyout Content Area</h4></dt>
   <dd>
    <div>
     <div class="bwWrapper"><a href="#"><img src="images/home_page_5_features/flyout_content_area_image.png" width="94" height="65" alt="" /></a></div>
     <p>Fugiat dapibus, tellus cursus commodo, tortoeir in mauristes conds ime ntum nibh, ut fermentum massats justo sitis amet risus. Crast matisers consectetut ameter fermes ntum unsers maecenas sadips ipsumores un  ...</p>
    </div> 
   </dd>
   <dt><h4>Yet Another Flyout Content Area</h4></dt>
   <dd>
    <div>
     <div class="bwWrapper"><a href="#"><img src="images/home_page_5_features/flyout_content_area_image.png" width="94" height="65" alt="" /></a></div>
     <p>Fugiat dapibus, tellus cursus commodo, tortoeir in mauristes conds ime ntum nibh, ut fermentum massats justo sitis amet risus. Crast matisers consectetut ameter fermes ntum unsers maecenas sadips ipsumores un  ...</p>
    </div> 
   </dd>
  </dl>
  </div>
  <!-- /flyout_area -->
  <!-- features_explore -->
  <div class="features_explore">
   <h4>Tons of Features To Explore</h4>
   <ul>
    <li>
     <div class="bwWrapper"><a href="#"><img src="images/home_page_5_features/tons_of_feature_image_1.png" width="94" height="65" alt="" /></a></div>
     <p>Fugiat dapibus, tellus cursus commodo, tortoeir in mauristes conds ime ntum nibh, ut fermentum massats justo sitis amet risus. Crast matisers consectetut ameter fermes ntum unsers maecenas sadips ipsumores un  ...<a href="#" class="read_more">read more</a></p>
    </li>
    <li>
     <div class="bwWrapper"><a href="#"><img src="images/home_page_5_features/tons_of_feature_image_2.png" width="94" height="65" alt="" /></a></div>
     <p>Fugiat dapibus, tellus cursus commodo, tortoeir in mauristes conds ime ntum nibh, ut fermentum massats justo sitis amet risus. Crast matisers consectetut ameter fermes ntum unsers maecenas sadips ipsumores un  ...<a href="#" class="read_more">read more</a></p>
    </li>
   </ul>
  </div>
  <!-- /features_explore -->
 </div>
</div>

<!-- footer -->
<!-- social block -->
<div class="social_block">
 <div class="wraper">
  <p>Stay connected with us in your favorite flavor!</p>
  <ul>
   <li class="facebook"><a href="#">Facebook</a></li>
   <li class="twitter"><a href="#">Twitter</a></li>
   <li class="linkedin"><a href="#">LinkedIn</a></li>
   <li class="rss"><a href="#">RSS</a></li>
   <li class="dribbble"><a href="#">Dribbble</a></li>
   <li class="google"><a href="#">Google+</a></li>
  </ul>
 </div>
</div>
<!-- /social block -->

<div class="footer">
 <footer>
  <!-- bottom about -->
  <div class="bottom_about">
   <p><img src="images/logo.png" alt="" /></p>
   <p>At vero eos et accusaus et iusto unir un dignissimos ducimus quirds siter ters pi blranditiis praesentium amets voluptatum un deleniti atque corrupti quosdirs dolores etra quasir moltias unstw excepturi sinte amets occaecatires.</p>
  </div>
  <!-- /bottom about -->
  <!-- recent tweets -->
  <div class="recent_tweets">
   <h3><span>Recent Tweets</span></h3>
   <ul>
    <li><a href="#">@laurakalbag</a> I will be very soon. Ase result reco endation <a href="#">31 minutes ago</a></li>
    <li><a href="#">@laurakalbag</a> you got chocolates!? That's i I'm signing up. <a href="#">37 minutes ago</a></li>
   </ul>
  </div>
  <!-- /recent tweets -->
  <!-- recent posts -->
  <div class="recent_posts">
   <h3><span>Recent Posts</span></h3>
   <ul>
    <li><a href="#">Lorem ipsum dolo amet consecect</a></li>
    <li><a href="#">Sed laoreet neque nonte mauris </a></li>
    <li><a href="#">Metus lacus, porta vestibulum</a></li>
    <li><a href="#">Morbi ac magna est ornare eliticits</a></li>
    <li><a href="#">Voluptas sadips nemis un etras</a></li>
   </ul>
  </div>
  <!-- /recent posts -->
  <!-- subscribe block -->
  <div class="subscribe_block">
   <h3><span>Stay Connected</span></h3>
   <form method="post" action="#">
    <p><input type="text" id="name" value="NAME ..." /></p>
    <p><input type="text" id="email" value="EMAIL ..." /></p>
    <p><input type="submit" value="Subscribe" /></p>
   </form>
  </div>
  <!-- /subscribe block -->
 </footer>
</div>

<!-- copyright -->
<div class="copyright">
 <div class="wraper">
  <p><span>Copyright 2012 Construct</span>All Rights Reserved<a href="#">RSS</a><a href="#">Comments</a></p>
  <a class="top" href="#">Back to the top</a>
 </div>
</div>
<!-- /copyright -->
<!-- /footer -->
</body>
</html> 
